import React, { Component } from 'react';
import DistPicker from 'react-distpicker';
import axios from '../../../axios/axios'
import { message } from 'antd';
class addAddress extends Component {
    constructor(props){
        super(props)
        this.state={
            name:'',
            sjld:'',
            detailaddress:'',
            phone:'',
            id:0,
            type:1,
            youbian:123456
        }
    }
    componentWillReceiveProps(nextProps){
        // console.log(nextProps)
        if(nextProps.location.query){
        if(nextProps.location.query.type===0){
            this.setState({
                name:nextProps.location.query.name,
                detailaddress:nextProps.location.query.address,
                phone:nextProps.location.query.phone,
                id:nextProps.location.query.id,
                type:0
            })
        }

        }
    }
    change(e){
        if(e.target.name==='name'){
            this.setState({
                name:e.target.value
            })
        }else if(e.target.name==='address'){
            this.setState({
                detailaddress:e.target.value
            })
        }else if(e.target.name==='phone'){
            this.setState({
                phone:e.target.value
            })
        }
    }
    sanji(obj){
        console.log(obj)
        this.setState({
            sjld:obj.province+' '+obj.city+' '+obj.district
        })
    }
    addaddress(){
    const params = new FormData();
      params.append("realName", this.state.name);
      params.append("address", this.state.sjld + " " + this.state.detailaddress);
      params.append("zipCode", this.state.youbian);
      params.append("phone", this.state.phone);
      if(this.state.type===0){
        params.append("id", parseInt(this.state.id));
        axios
        .put("small/user/verify/v1/changeReceiveAddress", params)
        .then((res) => {
          // console.log(res);
          if (res.data.status == "1001") {
            message.error(res.data.message);
          } else if (res.data.status == "0000") {
            message.success(res.data.message);
            this.props.history.push('/people/address');
          }
        });
      }else{
        axios
        .post("small/user/verify/v1/addReceiveAddress", params)
        .then((res) => {
          // console.log(res);
          if (res.data.status == "1001") {
            message.error(res.data.message);
          } else if (res.data.status == "0000") {
            message.success(res.data.message);
            this.props.history.push('/people/address');
          }
        });
      }
    }
    render() {
        
        return (
            <div className="address">
            <div className="right-mark">添加修改地址</div>
            <div className="address-add">
            <div className="form-box">
            <div className="form-list">
                <div className="label"><span className="text1">*</span>收货人姓名：</div>
                <div className="editor"><input type="text" name="name" value={this.state.name} onChange={this.change.bind(this)}/></div>
            </div>
            <div className="form-list">
                <div className="label"><span className="text1">*</span>所在地区：</div>
                <div className="editor">
                        {/* <div className="sel">
                            <select className="province">
                                <option value="0">-请选择-</option>
                             </select>
                        </div>
                        <div className="sel">
                            <select className="city">
                                <option value="0">-请选择-</option>
                            </select>
                        </div>
                        <div className="sel">
                            <select className="area">
                                <option value="0">-请选择-</option>
                            </select>
                        </div> */}
                        <DistPicker onSelect={this.sanji.bind(this)} placeholderProvince="-请选择省-" placeholderCity="-请选择市-" placeholderDistrict="-请选择县-" pickerClass="select-list" selectClass="sel"/>
                </div>
            </div>
            <div className="form-list">
                <div className="label"><span className="text1">*</span>详细地址：</div>
                <div className="editor"><input name="address" value={this.state.detailaddress} onChange={this.change.bind(this)}  type="text"/></div>
            </div>
            <div className="form-list">
                <div className="label"><span className="text1">*</span>联系电话：</div>
                <div className="editor"><input name="phone" value={this.state.phone} onChange={this.change.bind(this)} className="mobile" type="text" />&emsp;或固定电话：&emsp;<input className="area" type="text"/>&emsp;-&emsp;<input className="call" type="text"/></div>
            </div>
            <div className="form-list s2">
                <div className="label"></div>
                <div className="editor"><label><input type="radio" className="status checked" name="status"/>设为默认地址</label></div>
            </div>
            <div className="form-list action">
                <div className="label"></div>
                <input type="hidden" className="id" name="id"/>
                <button className="send-sure" onClick={this.addaddress.bind(this)}>确认提交</button>
            </div>
        </div>
            </div>
            </div>
        );
    }
}

export default addAddress;